<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <!-- 登录按钮 -->
    <button type="primary" class="btn-login"  @tap="bindGetUserInfo"  @getuserinfo="getUserInfo"  >一键登录</button>
	<!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		name:"my-login",
		data() {
			
			return {	
				nickName: null, //昵称
				avatarUrl: null, //头像
				isCanUse: uni.getStorageSync('isCanUse') || true, //默认为true
				userInfo: {},
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				canIGetUserProfile: true,
				detail: {},
			    openid: null,
				gender: null,
			    city: null,
		        province: null,
			    country: null,
			    session_key: null,
			    unionid: null,
			};
		},
		
			   
		        methods: {
					 ...mapMutations('m_user', ['updateUserInfo','updateToken']),
		            //第一次授权
		            bindGetUserInfo(e) {
		                var _this = this;
		                if (this.canIGetUserProfile) {
		                    //新版登录方式
		                    uni.getUserProfile({
		                        desc: '登录',
		                        success: (res) => {
		                            _this.userInfo = res.userInfo;
									uni.setStorageSync('userinfo', JSON.stringify(res.userInfo))
									 console.log(res.userInfo);
		                            try {
		                                _this.login();
		                            } catch (e) {}
		                        },
		                        fail: (res) => {
		                            console.log('用户还没有授权');
		                        }
		                    });
		                } else {
		                    if (e.detail.userInfo) {
		                        _this.userInfo = e.detail.userInfo;
								// console.log(e.userInfo);
		                        try {
		                            _this.login();
		                        } catch (e) {}
		                    } else {
		                        console.log('用户拒绝了授权');
		                        //用户按了拒绝按钮
		                    }
		                }
		            },
		            //登录
		            login() {
						
						console.log("调用login方法");
		                let _this = this;
		                // 获取登录用户code
		                uni.getProvider({
		                    service: 'oauth',
		                    success: function(res) {
		                        if (~res.provider.indexOf('weixin')) {
		                            uni.login({
		                                provider: 'weixin',
		                                success: function(res) {
		                                     //console.log(res);
		                                    if (res.code) {
		                                        let code = res.code;
												console.log("code打印：   "+res.code);
												//存到本地
												// uni.setStorageSync('token', JSON.stringify("1"))
												// this.updateToken(res.code)
		                                        uni.request({
		                                            url: '/api/public/v1/users/wxlogin',
		                                            data: {
		                                                code: code,
		                                            }, 
		                                            method: 'GET',
		                                            header: {
		                                                'content-type': 'application/json'
		                                            },
		                                            success: (res2) => {
		                                                console.log(res2.data.data); 
														console.log(res2.data.code); 
		                                                _this.detail = res2.data.data;
		                                                _this.updateUserInfo(res2.data.data);
		                                                uni.hideLoading();
		                                            }
		                                        });
		                                        //将用户登录code传递到后台置换用户SessionKey、OpenId等信息
		                                        //...写用code置换SessionKey、OpenId的接口
		                                        //置换成功调用登录方法_this.updateUserInfo();
		                                    } else {
		                                        uni.showToast({
		                                            title: '登录失败！',
		                                            duration: 2000
		                                        });
		                                    }
		                                },
		                            });
		                        } else {
		                            uni.showToast({
		                                title: '请先安装微信或升级版本',
		                                icon: "none"
		                            });
		                        }
		                    }
		                    // 
		                });
		            },
		            //向后台更新信息
		            updateUserInfo(state, token) {
		                let _this = this;
						this.commit('m_user/saveTokenToStorage')
		                // console.log(_this);
		                uni.request({
		                    url: '/api/public/v1/users/wxlogin', //服务器端地址
		                    data: {
		                        code: res.code,
		                              encryptedData: info.encryptedData,
		                              iv: info.iv,
		                              rawData: info.rawData,
		                              signature: info.signature
		                    },
		                    method: 'POST',
		                    header: {
		                        'content-type': 'application/json'
		                    },
		                    success: (res) => {
		                        //console.log(res)
		                        if (res.data.code == 200) {
									console.log("登录成功")
		                            // uni.reLaunch({ //信息更新成功后跳转到小程序首页
		                            //     // url: '/pages/index/index'
		                            // });
		                        }
		                    }
		
		                });
		            }
		        },
		
		    }
</script>

<style lang="scss">
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>
